<script lang="ts" setup>

import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import type { PageInfo, Result } from '@/tools/request'
import type { SysPermission } from '@/api/system/sysPermission/sysPermission.d'
import type { TableRowSelection } from '@arco-design/web-vue'
import { sysPermissionList } from '@/api/system/sysPermission/sysPermission'

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false
  },
  selectKeys: {
    type: Array<Number>,
    required: true
  }
})

const selectKeysRef = ref([...props.selectKeys])
watch(() => props.selectKeys, (newVal) => {
  selectKeysRef.value = newVal
})

const emits = defineEmits(['update:visible', 'commit'])
const closeModal = () => {
  emits('update:visible', false)
}

const queryParams = ref({} as SysPermission)

//加载列表
const loadList = () => {
  //@ts-ignore
  sysPermissionList(queryParams.value, {
    pageSize: 99999999,
    pageNum: 1
    //@ts-ignore
  }).then((resp: Result<PageInfo<SysPermission>>) => {
    table.pageInfo = resp.data
    table.permissionsMap = new Map()
    resp.data.list.forEach(val => {
      table.permissionsMap!.set(val.id!, val)
    })
  })
}

loadList()

const table = reactive({
  pageInfo: { list: [] as Array<SysPermission> } as PageInfo<SysPermission>,
  permissionsMap: null as Map<number, SysPermission> | null,
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    checkStrictly: true
  } as TableRowSelection,
  columns: [{
    title: 'ID',
    dataIndex: 'id'
  }, {
    title: '权限名',
    dataIndex: 'name'
  }, {
    title: '访问方法',
    dataIndex: 'method'
  }, {
    title: '访问地址',
    dataIndex: 'url'
  }],
  selectChange: (keys: string[]) => {
    table.checkPermissions = keys.map(val => table.permissionsMap!.get(Number(val)) as SysPermission)
  },
  checkPermissions: [] as SysPermission[],
  submit: () => {
    emits('commit', table.checkPermissions)
    emits('update:visible', false)
  }
})


</script>

<template>
  <a-modal @cancel="closeModal" :visible="props.visible" title="选择菜单" title-align="start" :closable="false"
           :footer="null" :width="1000">
    <a-form ref="searchFormRef" :model="queryParams" label-align="left"
            @submit="loadList"
            v-permission="'permission:sysPermission:list'"
    >
      <a-row :gutter="15" style="height: 32px">
        <a-col :span="6">
          <a-form-item field="name" label="权限名">
            <a-input v-model="queryParams.name"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="remark" label="备注">
            <a-input v-model="queryParams.remark"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-space>
            <a-button type="primary" html-type="submit">
              <template #icon>
                <IconSearch />
              </template>
              搜索
            </a-button>
            <a-button @click="$refs.searchFormRef.resetFields()" type="secondary">
              <template #icon>
                <IconRefresh />
              </template>
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-form>
    <a-space class="my-2">
      <a-button type="primary" @click="table.submit">
        <template #icon>
          <IconSave />
        </template>
        提交
      </a-button>
      <a-button @click="closeModal">
        <template #icon>
          <IconExport />
        </template>
        取消
      </a-button>
    </a-space>
    <a-table v-model:selected-keys="selectKeysRef" row-key="id" :row-selection="table.rowSelection"
             :data="table.pageInfo!.list" :columns="table.columns" @selectionChange="table.selectChange" />

  </a-modal>
</template>

<style scoped lang="scss">

</style>
